<template>
  <div class="my-container">
    <div class="herder">
      <router-link tag="div" to="/read" class="read" :class="{active: flag===1}" @click.native="oneAct" ref="look">博客</router-link>
      <router-link tag="div" to="/writing" class="read" :class="{active: flag===2}" @click.native="towAct">写博客</router-link>
      <router-link tag="span" to="/register" class="a a1">添加用户</router-link>
      <a @click.prevent="logOut" class="a a2">退出登录</a>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        flag: 1
      }
    },
    methods: {
      oneAct() {
        this.flag = 1
      },
      towAct() {
        this.flag = 2
      },
      logOut() {
        localStorage.token = ''
        this.$router.push('/login')
        this.$message({
          type: 'success',
          message: '请先登录'
        })
      }
    }
  }
</script>

<style lang="scss">
.my-container {
  min-width: 960px;
  .herder {
    background-color: #409EFF;
    color: #fff;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .a {
      cursor: pointer;
      font-size: 11px;
      color: rgb(100, 92, 92);
      position: absolute;
    }
    .a1 {
      left: 67%;
    }
    .a2 {
      left: 72%;
    }
    .a:hover {
      color: brown;
    }
    .writing {
      cursor: pointer;
    }
    .read {
      margin: 0 30px;
      cursor: pointer;
      padding: 10px 15px;
      &.active {
        background-color: #fff;
        color: black;
        border-radius: 5px;
      }
    }
  }
}

</style>